<div ng-controller="StateInteraction" id="tutorialStateInteraction">
  <md-card style="margin: 20px 0px; padding: 0px;" ng-if="!interactionId">
    <div class="oppia-add-interaction-button-container">
      <button type="button" class="btn btn-default btn-lg oppia-add-interaction-button protractor-test-open-add-interaction-modal" ng-click="openInteractionCustomizerModal()">
        + Add Interaction / End Conversation
      </button>
    </div>
  </md-card>

  <div ng-if="interactionId">
    <md-card class="oppia-editor-card-with-avatar">
      <div class="oppia-editor-card-body" title="<[getCurrentInteractionName()]>">
        <div class="oppia-editor-card-section-container">
          <div class="oppia-editor-card-section" style="height: 100%;">
            <img src="/third_party/static/material-design-icons-1.0.1/ic_close_black_48dp.png" ng-if="editabilityService.isEditable()" class="protractor-test-delete-interaction oppia-delete-interaction-button oppia-transition-200" ng-click="deleteInteraction()">

            <div ng-if="hasLoaded" class="protractor-test-interaction" ng-class="{'oppia-editable-section': editabilityService.isEditable()}">
              <div class="oppia-interaction-preview oppia-transition-200" style="position: absolute; width: 100%; height: 100%;" ng-click="openInteractionCustomizerModal()">
              </div>
              <div angular-html-bind="interactionPreviewHtml" class="oppia-pre-avatar-user" style="padding: 5px; pointer-events: none;">
              </div>
            </div>
          </div>
        </div>
      </div>
    </md-card>
  </div>
</div>

<script type="text/ng-template" id="modals/customizeInteraction">
  <div class="modal-header" style="border-bottom: 0; padding-bottom: 0;">
    <h3 ng-if="!stateInteractionIdService.displayed">
      Choose Interaction
    </h3>

    <h3 ng-if="stateInteractionIdService.displayed">
      Customize Interaction (<[INTERACTION_SPECS[stateInteractionIdService.displayed].name]>)
    </h3>
  </div>

  <div class="modal-body">
    <div ng-if="!stateInteractionIdService.displayed" ng-cloak>
      <tabset>
        <tab ng-repeat="category in ALLOWED_INTERACTION_CATEGORIES"
             heading="<[category.name]>" active="category.active"
             class="protractor-test-interaction-tab">
          <br>
          <div ng-repeat="interactionId in category.interaction_ids"
               ng-click="onChangeInteractionId(interactionId)"
               class="oppia-interaction-tile protractor-test-interaction-tile-<[interactionId]>">
            <img ng-src="/extensions/interactions/<[interactionId]>/static/<[interactionId]>.png">
            <div class="oppia-interaction-tile-name">
              <[INTERACTION_SPECS[interactionId].name]>
            </div>
          </div>
        </tab>
      </tabset>
    </div>

    <form ng-if="stateInteractionIdService.displayed" name="form.schemaForm" class="protractor-test-interaction-editor">
      <div ng-if="customizationArgSpecs.length === 0">
        <em>There are no customizations options available.<br><br>
        To use this interaction, click 'Save Interaction'.</em>
      </div>

      <div ng-repeat="customizationArgSpec in customizationArgSpecs track by $index">
        <div class="oppia-interaction-customization-label"><[customizationArgSpec.description]></div>
        <div>
          <schema-based-editor local-value="stateCustomizationArgsService.displayed[customizationArgSpec.name].value" schema="customizationArgSpec.schema">
          </schema-based-editor>
          <div style="margin-bottom: 15px;"></div>
        </div>
      </div>
    </form>
  </div>

  <div class="modal-footer">
    <button class="btn btn-default" style="float: left;" ng-click="returnToInteractionSelector()" ng-if="stateInteractionIdService.displayed">Change Interaction</button>

    <button class="btn btn-default" ng-click="cancel()">Cancel</button>
    <button class="btn btn-success protractor-test-save-interaction" ng-click="save()"
            ng-disabled="!stateInteractionIdService.displayed || form.schemaForm.$invalid">
      Save Interaction
    </button>
  </div>
</script>

<script type="text/ng-template" id="modals/deleteInteraction">
  <div class="modal-header">
    <h3>Delete Interaction</h3>
  </div>

  <div class="modal-body">
    <p>
      Are you sure you want to delete this interaction? This will also clear
      all its responses.
    </p>
  </div>

  <div class="modal-footer">
    <button class="btn btn-default" ng-click="cancel()">Cancel</button>
    <button class="btn btn-danger protractor-test-confirm-delete-interaction"
            ng-click="reallyDelete()">
      Delete Interaction
    </button>
  </div>
</script>
